<template>
	<view>
		<!-- 上面头部 -->
		<view class="top-background">
			<view class="userInfo">
				<image src="../../static/active-cate.png" class="userHead"></image>
				<text style="font-weight: 800;color: white;margin-top: 10px;">名字</text>
			</view>
		</view>
		<!-- 中间店铺 -->
		<view class="navLists">
			<view class="nav"><text>8</text><text>收藏的店铺</text></view>
			<view class="nav"><text>8</text><text>收藏的商品</text></view>
			<view class="nav"><text>8</text><text>关注的商品</text></view>
			<view class="nav"><text>8</text><text>足迹</text></view>
		</view>
		<!-- 我的订单 -->
		<view style="padding-top: 20px;">
			<text style="padding-left: 20px;">我的订单</text>
			<view class="OrderList">
				<view class="Order">
					<uni-icons type="wallet" size="50" color="#c00000"></uni-icons>
					<text>待付款</text>
				</view>
				<view class="Order">
					<uni-icons type="wallet" size="50" color="#c00000"></uni-icons>
					<text>待付款</text>
				</view>
				<view class="Order">
					<uni-icons type="wallet" size="50" color="#c00000"></uni-icons>
					<text>待付款</text>
				</view>
				<view class="Order">
					<uni-icons type="wallet" size="50" color="#c00000"></uni-icons>
					<text>待付款</text>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view style="padding: 10px 20px;">
			<view class="bottom-list">
				<text>收货地址</text>
				<uni-icons type="forward" size="30"></uni-icons>
			</view>
			<view class="bottom-list">
				<text>联系客服</text>
				<uni-icons type="forward" size="30"></uni-icons>
			</view>
			<view class="bottom-list">
				<text>退出登录</text>
				<uni-icons type="forward" size="30"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-userinfo",
		data() {
			return {};
		}
	}
</script>

<style scoped>
	.top-background {
		height: 200px;
		background-color: #c00000;
	}

	.userHead {
		height: 70px;
		width: 70px;
		border: 2px solid white;
		border-radius: 50%;
	}

	.userInfo {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		left: 40%;
		top: 7%;
	}

	.navLists {
		background-color: ;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 20px;
	}

	.nav {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 10px;
	}

	.Order {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 30px;
	}

	.OrderList {
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.bottom-list {
		display: flex;
		justify-content: space-between;
		padding-top: 15px;
	}
</style>
